<template>
    <d2-container>

        <el-form :inline="true" :model="dataSearch" ref="dataSearch">

            <el-form-item label="学生" prop="name">
                <el-input v-model="dataSearch.name" placeholder="请输入学生姓名"></el-input>
            </el-form-item>


            <el-form-item label="充值校区" prop="school">
                <el-select
                        v-model="dataSearch.school"
                        filterable>
                    <el-option
                            v-for="item in options.schoolList"
                            :key="item._id"
                            :label="item.name"
                            :value="item._id"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="支付状态:" prop="payStatus">
                <el-select v-model="dataSearch.payStatus" placeholder="请选择状态" prop="payStatus">
                    <el-option
                            v-for="item of this.options.payStatusOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="充值类型：" prop="type">
                <el-select v-model="dataSearch.type" placeholder="请选择类型">
                    <el-option
                            v-for="item of this.options.typeOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="formSubmit">
                    <d2-icon name="search"/>
                    查询
                </el-button>
            </el-form-item>

            <el-form-item>
                <el-button @click="resetForm('dataSearch')">
                    <d2-icon name="refresh"/>
                    重置
                </el-button>
            </el-form-item>

            <a href="#/charge-order-new">
                <el-button type="primary" style="float:right" icon="el-icon-plus">新建充值</el-button>
            </a>

        </el-form>

        <el-table :data="dataList" border style="width: 100%">

            <el-table-column prop="type" label="充值类型"></el-table-column>

            <el-table-column prop="agent" label="经办人"></el-table-column>
            <el-table-column prop="school" label="经办校区"></el-table-column>


            <el-table-column prop="student" label="学生"></el-table-column>

            <el-table-column prop="total" label="支付金额"></el-table-column>

            <el-table-column prop="discount" label="折扣"></el-table-column>

            <el-table-column prop="hour" label="充值小时"></el-table-column>

            <el-table-column prop="account" label="充值课时"></el-table-column>

            <el-table-column prop="month" label="充值月数"></el-table-column>

            <el-table-column prop="payStatus" label="支付状态"></el-table-column>

            <el-table-column prop="payWay" label="支付方式"></el-table-column>

            <el-table-column prop="hasBonus" label="是否提成"></el-table-column>

            <el-table-column prop="memoIn" label="对内备注"></el-table-column>

            <el-table-column prop="memoOut" label="对外备注"></el-table-column>

            <el-table-column prop="createdAt" label="创建时间"></el-table-column>

            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.payStatus=='待支付'" @click="confirmPay(scope.row)" type="text"
                               size="small">确认付款
                    </el-button>
                </template>
            </el-table-column>


        </el-table>

        <el-pagination
                background
                layout="total,sizes,prev, pager, next,jumper"
                :page-size="pageSize"
                :current-page="currentPage"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handlerSizeChange"
                @next-click="handleNextPage"
                @prev-click="handlePrevClick"
        ></el-pagination>

    </d2-container>
</template>

<script>
    import request from "@/plugin/axios";
    import {mapState} from "vuex";

    export default {
        data() {
            return {
                options: {
                    payStatusOption: [
                        {
                            label: '待支付',
                            value: 0
                        },
                        {
                            label: '已支付',
                            value: 1
                        }
                    ],
                    typeOption: [
                        {
                            label: '小时',
                            value: 1
                        },
                        {
                            label: '课时',
                            value: 2
                        },
                        {
                            label: '月数',
                            value: 3
                        }
                    ],
                    schoolList: []
                },
                dialogVisible: false,
                dataList: [],
                total: 0,
                pageSize: 20,
                currentPage: 1,
                class: [],
                dataSearch: {
                    name: undefined,
                    payStatus: undefined,
                    payWay: undefined,
                    school:undefined,
                    limitSchool:undefined
                },
                courseOrderOne: undefined
            };
        },
        computed: {
            ...mapState('d2admin/user', ['info']),
        },
        methods: {
            confirmPay(e) {
                request({
                    url: "/chargeOrder/updateChargeOrderOne",
                    method: "post",
                    data: {id: e._id}
                }).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            message: "确认付款成功"
                        });
                        this.getDataList(this.dataSearch);
                    }
                });
            },

            getCourseOrderOne(scope) {
                let _id = scope._id
                this.dialogVisible = true;
                request({
                    url: "/courseOrder/getCourseOrderOne",
                    method: "post",
                    data: {_id}
                }).then(res => {
                    if (res.code == 200) {
                        let result = [];
                        let response = res.data;
                        let courseOrder = response.courseOrder;
                        courseOrder.forEach((value) => {
                            let temp = {}

                            if (value.courseType && value.courseType.length > 0) {
                                temp.courseType = value.courseType.map(value => value.name).join(',');
                            } else {
                                temp.courseType = ''
                            }
                            temp.name = value.name;
                            temp.price = value.price;
                            temp.agent = value.agent;
                            temp.student = value.student;
                            temp.school = res.data.school.name;
                            temp.createdAt = res.data.createdAt;
                            temp.student = res.data.student.name;
                            temp.payStatus = res.data.payStatus == 0 ? '待支付' : res.data.payStatus == 1 ? '已支付' : '已取消';
                            result.push(temp)
                        })
                        this.courseOrderOne = result
                    }
                })
            },

            formSubmit() {
                this.dataSearch.page = this.currentPage;
                this.dataSearch.pageSize = this.pageSize;
                this.getDataList(this.dataSearch);
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.getDataList(this.dataSearch);
            },

            handleCurrentChange(currentPage) {
                this.currentPage = currentPage
                this.dataSearch.page = this.currentPage;
                this.dataSearch.pageSize = this.pageSize;
                this.getDataList(this.dataSearch);
            },
            handlerSizeChange(pageSize) {
                this.pageSize = pageSize
                this.dataSearch.page = this.currentPage;
                this.dataSearch.pageSize = this.pageSize;
                this.getDataList(this.dataSearch);
            },
            handleNextPage() {
                this.currentPage = this.currentPage + 1
                this.dataSearch.page = this.currentPage;
                this.dataSearch.pageSize = this.pageSize;
                this.getDataList(this.dataSearch);
            },
            handlePrevClick() {
                this.currentPage = this.currentPage - 1
                this.dataSearch.page = this.currentPage;
                this.dataSearch.pageSize = this.pageSize;
                this.getDataList(this.dataSearch);
            },

            getDataList(data) {
                this.dataSearch.limitSchool = this.info.school.map(value => value._id);
                data.limitSchool = this.dataSearch.limitSchool;
                request({
                    url: "/chargeOrder/getChargeOrderList",
                    method: "post",
                    data: data
                }).then(res => {
                    this.total = res.data.total;
                    this.currentPage = res.data.currentPage;
                    this.dataList = [];
                    this.dataList = res.data.chargeOrder;
                    this.dataList.forEach((item, index) => {
                        this.dataList[index].agent = item.agent.name;
                        this.dataList[index].school = item.school.name;
                        this.dataList[index].student = item.student.name;
                        this.dataList[index].type = item.type == 1 ? '小时' :  this.dataList[index].type = item.type == 2 ? '课时' : '月数';
                        this.dataList[index].payWay = item.payWay == 1 ? '现金' : item.payWay == 2 ? '支付宝' : item.payWay == 3 ? '微信' : '其它';
                        this.dataList[index].payStatus = item.payStatus == 0 ? '待支付' : '已支付';
                        this.dataList[index].hasBonus = item.hasBonus == 1 ? '提成' : '无提成';
                        this.dataList[index].createdAt = this.formatDate(item.createdAt)
                    });
                })
            },
            formatDate(date) {
                date = new Date(date);
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                return [year, month, day].map(this.formatNumber).join("-");
            },
            formatNumber(n) {
                n = n.toString();
                return n[1] ? n : "0" + n;
            },
            getSchoolList() {
                console.log(this.info.school[0],'ddd')
                this.options.schoolList = this.info.school;
                if (this.info.school[0].headquarter == 1){
                    let data = {};
                          data.page = 1;
                          data.pageSize = 9999999;
                          request({
                            url: "/school/getSchoolList",
                            method: "post",
                            data
                          }).then(res => {
                            this.options.schoolList = res.data.school;
                          });
                }
            },
        },
        created() {
            console.log(this.info,'???')
            this.getSchoolList();
            this.dataSearch.page = this.currentPage;
            this.dataSearch.pageSize = this.pageSize;
            this.getDataList(this.dataSearch);
        }
    };
</script>
